<script>
import {quillEditor} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {getcategorylist} from "../../api/articlesAPI/https";

export default ({
  name: "compilePage",
  props: {
    editList: Object,
    nameList: Array
  },
  components: {   //界面组件引用
    quillEditor
  },
  watch: {
    editList: {
      handler(val) {
        // console.log(val)
        this.ruleForm = val
      }
    }
  },
  data() {
    return {
      value:'111',
      editorOption: {},
      Quill: '',
      content: '',
      // 获取栏目
      columnList: '',
      // 父传子
      ruleForm: {
        college: '',
        className: '',
        name: '',
        phoneNumber: '',
        region: '',
        stuNum: '',
        enrollmentTime: '',
        anamnesis: '',
        experience: '',
        medicationSituation: '',
        psychometricTest: '',
        birthday: '',
        education: '',
        gender: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      //  多选
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    };
  },
  methods: {
    // 富文本事件
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
// 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
// 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
// 内容改变事件，只需要这一个方法就够了
    onEditorChange({quill, html, text}) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
  created() {
    console.log(this.nameList)
    // const quill = new Quill('#editor');
  }
})
</script>

<template>
  <div>
    <div>
      <el-button type="text" @click="showModal" style="opacity: 1;font-size: 12px">
        <i data-v-94c6628e="" class="el-icon-edit"></i>
        编辑
      </el-button>
      <a-modal
        title="编辑文章"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <!-- 主体内容-->
        <div style="padding: 20px">
          <!-- 文章标题-->
          <div>
            <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
              <el-row>
                <el-form-item label="文章标题">
                  <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
              </el-row>
              <el-row style="display: flex;justify-content: space-between">
                <!-- 封面图片-->
                <div>
                  <span>封面图片</span>
                  <img src="" alt="" style="width: 140px;height: 140px">
                </div>
                <!--选择文章栏目-->
                <el-form-item label="文档栏目">
                  <el-select v-model="value" placeholder="请选择文档栏目">
                    <el-option
                      v-for="item in nameList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <quill-editor
                class='editor'
                v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
                @ready="onEditorReady($event)">
              </quill-editor>
            </el-form>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .ant-modal-content {
  width: 800px;
}

::v-deep .el-button--default {
  margin-left: 200px;
}

::v-deep .el-col-11 {
  width: 100%;
}

::v-deep .el-select.el-select--medium {
  width: 100%;
}

::v-deep .ant-modal-header {
  background-color: #00afff;
}
</style>
